<!--
程序名：问卷预览
功能：用户打开问卷进行预览
-->
<template>
	<div class="display">
		<div class="content">
			<h3>{{title}}</h3>
			<div class="top" v-if="description!=''">
				{{description}}
			</div>
			<el-card class="box-card" v-for="(item,index) in detail">
				<div slot="header" class="clearfix">

					<div class="questionTitle">
						<!--显示必填标识-->
						<span style="color: #F56C6C;">
							<span v-if="item.must">*</span>
							<span v-else>&nbsp;</span>
						</span>
						{{(index+1)+'.'+item.title}}
					</div>
				</div>

				<!--单选题展示-->
				<div class="text item" v-if="item.type=='radio'" v-for="optionItem in item.options">
					<el-radio v-model="item.radioValue" :label="optionItem.id" style="margin: 5px;">{{ optionItem.title }}</el-radio>
				</div>

				<!--多选题展示-->
				<el-checkbox-group v-if="item.type=='checkbox'" v-model="item.checkboxValue">
					<div class="text item" v-for="optionItem in item.options">
						<el-checkbox :label="optionItem.id" style="margin: 5px;">{{ optionItem.title }}</el-checkbox>
					</div>
				</el-checkbox-group>


				<!--填空题展示-->
				<el-input v-if="item.type=='text'" type="textarea" :rows="item.rowNum" v-model="item.textValue" resize="none">
				</el-input>

			</el-card>

			<div align="center">
				<el-link type="primary" href="/">返回首页</el-link>
			</div>

		</div>
	</div>
</template>
<script>
	import axios from "axios";
	export default {
		data() {
			return {
				dialogShow: false,
				dialogTitle: '',
				title: '',
				description: '',
				detail: [],
				formId: 0,
			}
		},
		mounted() {
			this.formId = this.$route.params.id;
			console.log(this.formId);

			this.getForm(this.formId);
		},
		methods: {
			getForm(id) {
				const _this = this;
				axios
					.get("http://localhost:8082/userForm/findById/" + id)
					.then(function(resp) {
						_this.title = resp.data.title;
						_this.description = resp.data.description;
						_this.detail = resp.data.questions;


						for (let i = 0; i < _this.detail.length; i++) {
							_this.$set(_this.detail[i], 'radioValue', -1);
							_this.$set(_this.detail[i], 'checkboxValue', []);
							_this.$set(_this.detail[i], 'textValue', '');

						}

						console.log(JSON.stringify(_this.detail));
					})
					.catch(function(error) {
						console.log(error);
					});
			},

		}
	}
</script>
<style scoped>
	.display {
		text-align: center;
		padding: 20px;
	}

	.display .top {
		color: #606266;
		padding: 0 10px 10px 10px;
		border-bottom: 3px solid #409EFF;
		font-size: 15px;
		line-height: 22px;
		text-align: left;
	}

	.display .content {
		width: 100%;
		max-width: 800px;
		display: inline-block;
		text-align: center;
	}

	.display .box-card {
		text-align: left;
		width: 100%;
		margin: 10px 0 10px 0;
	}

	.display .bottom {
		margin: 20px 10px 20px 10px;
		color: #909399;
	}

	.display a:link,
	a:visited,
	a:active {
		color: #909399;
		text-decoration: none;
	}
</style>
